import React from 'react';
import MainUI from '../../components/layout/MainUI';
import AddCustomerModalUI from '../../components/shop/customer/AddCustomerModalUI';
import EditCustomerModalUI from '../../components/shop/customer/EditCustomerModalUI';
import {connect} from 'dva';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Pagination,
  Popconfirm,
  Row,
  Table,
  message,
  Dropdown,
  Menu,
  Icon,
  Modal
} from 'antd';

const FormItem = Form.Item;
const params = {
  pageSize: 10,
  pageNumber: 1
};
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
};

class Customer extends React.Component {

  state = {
    columns: [
      {title: '姓名', dataIndex: 'name',},
      {
        title: '会员类型', dataIndex: 'customerType', render: (value) => {
        return <font color='red' size={3}>{value}</font>;
      }
      },
      {
        title: '余额(元)', dataIndex: 'amount', render: (value) => {
        return <font size={3}>￥ {value}</font>;
      }
      },
      {title: '手机', dataIndex: 'cellphone',},
      {title: '会员卡号', dataIndex: 'customerNo',},
      {
        title: '性别', dataIndex: 'gender', render: (text) => {
        return text == "Male" ? "男" : text == "Female" ? "女" : "未知"
      }
      },
      {title: '昵称', dataIndex: 'nickName',},
      {
        title: '头像', dataIndex: 'photo', render: (text) => {
        return text != null ? <Button size='small' onClick={() => {
          this.handlePreview(text);
        }
        }> 查看</Button> : ''
      },
      },
      {
        title: '操作', render: (text, row, index) => {
        const menu = <Menu>
          <Menu.Item key={"edit" + row.id}>
            <Button icon="edit" size="small" onClick={() => {
              this.editModalVisiblefuc(true, row);
            }}>修改</Button>
          </Menu.Item>
          <Menu.Divider/>
          <Menu.Item key={"delete" + row.id}>
            <Popconfirm title="你确定要删除顾客操作? 删除后无法恢复。" onConfirm={() => {
              this.delete(row);
            }} okText="是" cancelText="否">
              <Button type='danger' icon="delete" size="small">删除</Button>
            </Popconfirm>
          </Menu.Item>
        </Menu>;
        return <Dropdown overlay={menu} trigger={['click']}>
          <a className="ant-dropdown-link" href="#">
            菜单 <Icon type="down"/>
          </a>
        </Dropdown>

      }
      },
    ],
    addModalVisible: false,
    editModalVisible: false,
    editRow: undefined,
    previewVisible: false,
    previewImage: null,
  };
  handlePreview = (url) => {
    this.setState({
      previewImage: url,
      previewVisible: true,
    });
  };
  search = (page, pageSize) => {
    if (page != null || page != undefined) {
      params.pageNumber = page;
    }

    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'customer/e_getPageCustomers',
          payload: {...params, ...values}
        });
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
  };

  addModalVisiblefuc = (bool) => {
    this.props.dispatch({
      type: 'customer/e_customerTypes'
    });
    const state = this.state;
    state.addModalVisible = bool;
    this.setState(state);
  };

  editModalVisiblefuc = (bool, editRow) => {
    this.props.dispatch({
      type: 'customer/e_customerTypes'
    });
    const state = this.state;
    state.editModalVisible = bool;
    state.editRow = editRow;
    this.setState(state);
  };

  delete = (row) => {
    if (row != undefined || row != null) {
      const ids = [row.id];
      this.props.dispatch({
        type: 'customer/e_delete',
        payload: {ids: ids, params: {...params, ...this.props.form.getFieldsValue()}}
      });
    } else {
      message.warning('请选择需要删除的数据！');

    }
  };

  render() {

    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 门店管理</Breadcrumb.Item>
          <Breadcrumb.Item> 顾客管理</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Form className="ant-advanced-search-form">
            <Row>
              <Col span={4}>
                <FormItem {...formItemLayout} label='姓名'>
                  {this.props.form.getFieldDecorator('name')(
                    <Input placeholder="姓名" suffix={<Icon type='user'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={4}>
                <FormItem {...formItemLayout} label='手机'>
                  {this.props.form.getFieldDecorator('cellphone', {
                    rules: [
                      {
                        message: "请输入手机号",
                        type: "string",
                        pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                      },
                    ],
                  })(
                    <Input placeholder="手机号" suffix={<Icon type='phone'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={4}>
                <FormItem {...formItemLayout} label='会员卡号'>
                  {this.props.form.getFieldDecorator('customerNo')(
                    <Input placeholder="会员卡号" suffix={<Icon type='card'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <Button style={{marginLeft: 8, marginTop: '3px'}} onClick={this.handleReset}>
                  清空
                </Button>
              </Col>
            </Row>
          </Form>
          <Row>
            <Col span={24} style={{textAlign: 'right'}}>
              <Button type="primary" icon="retweet" onClick={() => {
                this.search();
              }}>刷新</Button><span className="ant-divider"/>
              <Button onClick={() => {
                this.addModalVisiblefuc(true)
              }}>新增</Button>
            </Col>
          </Row>
          <Row>
            {<Table bordered={true} rowKey='id' style={{marginTop: '10px'}}
                    columns={this.state.columns}
                    dataSource={this.props.pageRows.data} pagination={false}/>}
            {
              this.props.pageRows.pageNumber!= undefined?
                <Pagination style={{float: 'right', marginTop: '5px'}} onChange={this.search}
                            total={this.props.pageRows.totalRows} current={this.props.pageRows.pageNumber}
                            pageSize={this.props.pageRows.pageSize}/> : ''
            }

          </Row>
          {
            this.state.addModalVisible ? <AddCustomerModalUI showOrHiddenModalVisible={this.addModalVisiblefuc}
                                                             customerTypes={this.props.customerTypes}/> : ''
          }
          {
            this.state.editModalVisible ? <EditCustomerModalUI showOrHiddenModalVisible={this.editModalVisiblefuc}
                                                               customerTypes={this.props.customerTypes}
                                                               editRow={this.state.editRow}/> : ''
          }
          {
            <Modal visible={this.state.previewVisible} footer={null} onCancel={() => {
              this.state.previewVisible = false;
              this.setState(this.state);
            }}>
              <img alt="example" style={{width: '100%'}} src={this.state.previewImage}/>
            </Modal>
          }
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    pageRows: state.customer.pageRows,
    customerTypes: state.customer.customerTypes,
  }
}

export default connect(mapStateToProps)(Form.create()(Customer));
